<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            border:5px solid blue;
            overflow: hidden;
        }
        #leftpanel{
            background-color: lightblue;
            width: 300px;
            float: left;
            padding-bottom: 3000px;
            margin-bottom: -3000px;
        }
        #right{padding-left: 300px;}
        #rightpanel{
            padding-bottom: 3000px;
            margin-bottom: -3000px;
        }
        .date{
            font-size: 12px;
            color:#999;
        }
        .content{
            background-color: lightyellow;
        }
        #container{
            margin: 10px;
        }
    </style>
    <script src="angular/angular.min.js"></script>
    <script src="angular-route/angular-route.min.js"></script>
</head>
<body>
<div ng-app="NewsPub">
    <!--<script type="text/ng-template" id="list.html">-->
        <!--<table width="100%" border="1" style="border-collapse:collapse;">-->
            <!--<thead>-->
            <!--<td>id</td>-->
            <!--<td>标题</td>-->
            <!--<td>内容</td>-->
            <!--<td>发布时间</td>-->
            <!--</thead>-->
            <!--<tr ng-repeat="news in newsList">-->
                <!--<td>{{news.id}}</td>-->
                <!--<td><a href='#/detail/{{news.id}}'>{{news.title}}</a></td>-->
                <!--<td>{{news.content}}</td>-->
                <!--<td>{{news.date}}</td>-->
            <!--</tr>-->
        <!--</table>-->
    <!--</script>-->

    <script type="text/ng-template" id="add.html">
        <h1>添加新闻</h1>
        标题：<input type="text" ng-model="title"><br>
        内容：<textarea ng-model="content" cols="30" rows="10" style="vertical-align:top;"></textarea><br>
        <button ng-click="add()">提交</button>
    </script>

    <script type="text/ng-template" id="edit.html">
        <h1>编辑新闻{{news.id}}</h1>
        标题：<input type="text" ng-model="news.title"><br>
        内容：<textarea ng-model="news.content" cols="30" rows="10" style="vertical-align:top;"></textarea><br>
        <button ng-click="update()">提交</button>
    </script>

    <script type="text/ng-template" id="detail.html">
        <a href="#/list">返回列表</a>
        <div id="container">
            <a href="#/edit/{{news.id}}">编辑</a>
            <h1>{{news.title}}</h1>
            <span class="date">发布日期：{{news.date}}</span>
            <div class="content">正文：   {{news.content}}</div>
        </div>
    </script>

    <h1>新闻发布系统</h1>
    <div id="content">
        <div id="leftpanel">
            <ul>
                <li><a href="#/list.template.html">新闻列表</a></li>
                <li><a href="#/add">发布新闻</a></li>
            </ul>
        </div>
        <div id="right">
            <div id="rightpanel" ng-view></div>
        </div>
    </div>
</div>

<script>
    var app = angular.module('NewsPub', ['ngRoute']);
    function routeConfig($routeProvider){
        $routeProvider.
        when('/', {
            controller: 'ListController',
            templateUrl: './list.template.html'
        }).
        when('/detail/:id', {
            controller: 'DetailController',
            templateUrl: 'detail.html'
        }).
        when('/edit/:id', {
            controller: 'EditController',
            templateUrl: 'edit.html'
        }).
        when('/list', {
            controller: 'ListController',
            templateUrl: 'list.html'
        }).
        when('/add', {
            controller: 'AddController',
            templateUrl: 'add.html'
        }).
        otherwise({
            redirectTo: '/'
        });
    };

    app.config(routeConfig);

    var newsList = [{
        id : 1,
        title : 'title 1111',
        content : 'content 1111111',
        date : new Date()
    },{
        id : 2,
        title : 'title 2222',
        content : 'content 2222222',
        date : new Date()
    },{
        id : 3,
        title : 'title 3333',
        content : 'content 3333333',
        date : new Date()
    },{
        id : 4,
        title : 'title 4444',
        content : 'content 4444444',
        date : new Date()
    },{
        id : 3,
        title : 'title 5555',
        content : 'content 5555555',
        date : new Date()
    },{
        id : 3,
        title : 'title 6666',
        content : 'content 6666666',
        date : new Date()
    },{
        id : 3,
        title : 'title 7777',
        content : 'content 7777777',
        date : new Date()
    }];

    app.controller('ListController',function($scope){
        $scope.newsList = newsList;
    });

    app.controller('DetailController',function($scope, $routeParams){
        $scope.news = newsList[$routeParams.id-1];
    });

    app.controller('AddController',function($scope,$location){
        $scope.title = '';
        $scope.content = '';
        $scope.add = function(){
            newsList.push({
                id : newsList.length+1,
                title : $scope.title,
                content : $scope.content,
                date : new Date()
            });

            $location.path('list');
        }
    });

    app.controller('EditController',function($scope, $routeParams, $location){
        $scope.news = newsList[$routeParams.id-1];
        $scope.update = function(){
            newsList[$routeParams.id-1] = $scope.news;

            $location.path('list');
        }
    })
</script>
</body>
</html>